ReviewApplicationsRoot - Code Metrics - Inspection of "1.0.17 (#2441)" - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 6ceee8...d4902a )

by Tristan

created 2020-01-02 20:36 UTC

ReviewApplicationsRoot A

↳ Parent: resources/assets/js/components/ApplicationReview/ReviewApplicationsRoot.tsx

Complexity

Total Complexity

Size/Duplication

Total Lines	172
Duplicated Lines	0 %

Importance

Changes

Metric	Value
eloc	136
dl	0
loc	172
rs	10
c	0
b	0
f	0
wmc	15

7 Functions

Rating	Name	Size	Complexity
A	render	22	1
A	handleBulkStatusChange	42	3
A	submitReview	21	1
A	handleNotesChange	17	3
A	handleStatusChange	17	3
A	handleSavingStatusChange	12	2
A	updateReviewState	13	2

/* eslint camelcase: "off", @typescript-eslint/camelcase: "off" */
import React from "react";
import ReactDOM from "react-dom";

// Internationalizations
import { injectIntl, defineMessages, WrappedComponentProps } from "react-intl";

import camelCase from "lodash/camelCase";
import Swal from "sweetalert2";
import {
  Job,
  Application,
  ReviewStatus,
  ApplicationReview,
} from "../../models/types";
import ReviewApplications from "./ReviewApplications";
import { find } from "../../helpers/queries";
import * as routes from "../../helpers/routes";
import { classificationString } from "../../models/jobUtil";
import { axios } from "../../api/base";
import IntlContainer from "../../IntlContainer";

interface ReviewApplicationsProps {
  job: Job;
  initApplications: Application[];
  reviewStatuses: ReviewStatus[];
}

interface ReviewApplicationsState {
  applications: Application[];
  savingStatuses: { applicationId: number; isSaving: boolean }[];
}

interface ReviewSubmitForm {
  review_status_id?: number | null;
  notes?: string | null;
}

const localizations = defineMessages({
  oops: {
    id: "alert.oops",
    defaultMessage: "Save",
    description: "Dynamic Save button label",
  },
  somethingWrong: {
    id: "apl.reviewSaveFailed",
    defaultMessage:
      "Something went wrong while saving a review. Try again later.",
    description: "Dynamic Save button label",
  },
});

class ReviewApplicationsRoot extends React.Component<
  ReviewApplicationsProps & WrappedComponentProps,
  ReviewApplicationsState
> {
  public constructor(props: ReviewApplicationsProps & WrappedComponentProps) {
    super(props);
    this.state = {
      applications: props.initApplications,
      savingStatuses: props.initApplications.map(application => ({
        applicationId: application.id,
        isSaving: false,
      })),
    };
    this.handleStatusChange = this.handleStatusChange.bind(this);
    this.handleBulkStatusChange = this.handleBulkStatusChange.bind(this);
    this.handleNotesChange = this.handleNotesChange.bind(this);
    this.updateReviewState = this.updateReviewState.bind(this);
    this.handleSavingStatusChange = this.handleSavingStatusChange.bind(this);
  }

  protected updateReviewState(
    applicationId: number,
    review: ApplicationReview,
  ): void {
    const { applications } = this.state;
    const updatedApplications = applications.map(application => {
      if (application.id === applicationId) {
        return Object.assign(application, { application_review: review });
      }
      return { ...application };
    });
    this.setState({ applications: updatedApplications });
  }

  protected handleSavingStatusChange(
    applicationId: number,
    isSaving: boolean,
  ): void {
    const { savingStatuses } = this.state;
    const statuses = savingStatuses.map(item =>
      item.applicationId === applicationId
        ? { applicationId, isSaving }
        : { ...item },
    );
    this.setState({ savingStatuses: statuses });
  }

  protected submitReview(
    applicationId: number,
    review: ReviewSubmitForm,
  ): void {
    const { intl } = this.props;
    this.handleSavingStatusChange(applicationId, true);
    axios
      .put(routes.applicationReviewUpdate(intl.locale, applicationId), review)
      .then(response => {
        const newReview = response.data as ApplicationReview;
        this.updateReviewState(applicationId, newReview);
        this.handleSavingStatusChange(applicationId, false);
      })
      .catch(() => {
        Swal.fire({
          icon: "error",
          title: intl.formatMessage(localizations.oops),
          text: intl.formatMessage(localizations.somethingWrong),
        });
        this.handleSavingStatusChange(applicationId, false);
      });
  }

  protected handleStatusChange(
    applicationId: number,
    statusId: number | null,
  ): void {
    const { applications } = this.state;
    const application = find(applications, applicationId);
    if (application === null) {
      return;
    }
    const oldReview = application.application_review
      ? application.application_review
      : {};
    const submitReview = Object.assign(oldReview, {
      review_status_id: statusId,
    });
    this.submitReview(applicationId, submitReview);
  }

  protected handleBulkStatusChange(
    applicationIds: number[],
    statusId: number | null,
  ): void {
    const { applications } = this.state;
    const { intl } = this.props;
    const changedApplications = applications.filter(application =>
      applicationIds.includes(application.id),
    );
    let errorThrown = false;
    changedApplications.map(application => {
      const oldReview = application.application_review
        ? application.application_review
        : {};
      const submitReview = Object.assign(oldReview, {
        review_status_id: statusId,
      });
      this.handleSavingStatusChange(application.id, true);
      const request = axios
        .put(
          routes.applicationReviewUpdate(intl.locale, application.id),
          submitReview,
        )
        .then(response => {
          const newReview = response.data as ApplicationReview;
          this.updateReviewState(application.id, newReview);
          this.handleSavingStatusChange(application.id, false);
        })
        .catch(() => {
          this.handleSavingStatusChange(application.id, false);
          // Only show error modal first time a request fails
          if (!errorThrown) {
            errorThrown = true;
            Swal.fire({
              icon: "error",
              title: intl.formatMessage(localizations.oops),
              text: intl.formatMessage(localizations.somethingWrong),
            });
          }
        });
      return request;
    });
  }

  protected handleNotesChange(
    applicationId: number,
    notes: string | null,
  ): void {
    const { applications } = this.state;
    const application = find(applications, applicationId);
    if (application === null) {
      return;
    }
    const oldReview = application.application_review
      ? application.application_review
      : {};
    const submitReview = Object.assign(oldReview, {
      notes,
    });
    this.submitReview(applicationId, submitReview);
  }

  public render(): React.ReactElement {
    const { applications, savingStatuses } = this.state;
    const { reviewStatuses, job } = this.props;
    const { intl } = this.props;

    const reviewStatusOptions = reviewStatuses.map(status => ({
      value: status.id,
      label: camelCase(status.name),
    }));

    return (
      <ReviewApplications
        title={job[intl.locale].title}
        classification={classificationString(job)}
        closeDateTime={job.close_date_time}
        applications={applications}
        reviewStatusOptions={reviewStatusOptions}
        onStatusChange={this.handleStatusChange}
        onBulkStatusChange={this.handleBulkStatusChange}
        onNotesChange={this.handleNotesChange}
        savingStatuses={savingStatuses}
      />
    );
  }
}

if (document.getElementById("review-applications-container")) {
  const container = document.getElementById(
    "review-applications-container",
  ) as HTMLElement;
  if (
    container.hasAttribute("data-job") &&
    container.hasAttribute("data-applications") &&
    container.hasAttribute("data-review-statuses") &&
    container.hasAttribute("data-locale")
  ) {
    const job = JSON.parse(container.getAttribute("data-job") as string);
    const applications = JSON.parse(
      container.getAttribute("data-applications") as string,
    );
    const reviewStatuses = JSON.parse(
      container.getAttribute("data-review-statuses") as string,
    );
    const language = container.getAttribute("data-locale") as string;
    const IntlReviewApplicationsRoot = injectIntl(ReviewApplicationsRoot);
    ReactDOM.render(
      <IntlContainer locale={language}>
        <IntlReviewApplicationsRoot
          job={job}
          initApplications={applications}
          reviewStatuses={reviewStatuses}
        />
      </IntlContainer>,
      container,
    );
  }
}

export default injectIntl(ReviewApplicationsRoot);


1			/* eslint camelcase: "off", @typescript-eslint/camelcase: "off" */
2			import React from "react";
3			import ReactDOM from "react-dom";
4
5			// Internationalizations
6			import { injectIntl, defineMessages, WrappedComponentProps } from "react-intl";
7
8			import camelCase from "lodash/camelCase";
9			import Swal from "sweetalert2";
10			import {
11			Job,
12			Application,
13			ReviewStatus,
14			ApplicationReview,
15			} from "../../models/types";
16			import ReviewApplications from "./ReviewApplications";
17			import { find } from "../../helpers/queries";
18			import * as routes from "../../helpers/routes";
19			import { classificationString } from "../../models/jobUtil";
20			import { axios } from "../../api/base";
21			import IntlContainer from "../../IntlContainer";
22
23			interface ReviewApplicationsProps {
24			job: Job;
25			initApplications: Application[];
26			reviewStatuses: ReviewStatus[];
27			}
28
29			interface ReviewApplicationsState {
30			applications: Application[];
31			savingStatuses: { applicationId: number; isSaving: boolean }[];
32			}
33
34			interface ReviewSubmitForm {
35			review_status_id?: number \| null;
36			notes?: string \| null;
37			}
38
39			const localizations = defineMessages({
40			oops: {
41			id: "alert.oops",
42			defaultMessage: "Save",
43			description: "Dynamic Save button label",
44			},
45			somethingWrong: {
46			id: "apl.reviewSaveFailed",
47			defaultMessage:
48			"Something went wrong while saving a review. Try again later.",
49			description: "Dynamic Save button label",
50			},
51			});
52
53			class ReviewApplicationsRoot extends React.Component<
54			ReviewApplicationsProps & WrappedComponentProps,
55			ReviewApplicationsState
56			> {
57			public constructor(props: ReviewApplicationsProps & WrappedComponentProps) {
58			super(props);
59			this.state = {
60			applications: props.initApplications,
61			savingStatuses: props.initApplications.map(application => ({
62			applicationId: application.id,
63			isSaving: false,
64			})),
65			};
66			this.handleStatusChange = this.handleStatusChange.bind(this);
67			this.handleBulkStatusChange = this.handleBulkStatusChange.bind(this);
68			this.handleNotesChange = this.handleNotesChange.bind(this);
69			this.updateReviewState = this.updateReviewState.bind(this);
70			this.handleSavingStatusChange = this.handleSavingStatusChange.bind(this);
71			}
72
73			protected updateReviewState(
74			applicationId: number,
75			review: ApplicationReview,
76			): void {
77			const { applications } = this.state;
78			const updatedApplications = applications.map(application => {
79			if (application.id === applicationId) {
80			return Object.assign(application, { application_review: review });
81			}
82			return { ...application };
83			});
84			this.setState({ applications: updatedApplications });
85			}
86
87			protected handleSavingStatusChange(
88			applicationId: number,
89			isSaving: boolean,
90			): void {
91			const { savingStatuses } = this.state;
92			const statuses = savingStatuses.map(item =>
93			item.applicationId === applicationId
94			? { applicationId, isSaving }
95			: { ...item },
96			);
97			this.setState({ savingStatuses: statuses });
98			}
99
100			protected submitReview(
101			applicationId: number,
102			review: ReviewSubmitForm,
103			): void {
104			const { intl } = this.props;
105			this.handleSavingStatusChange(applicationId, true);
106			axios
107			.put(routes.applicationReviewUpdate(intl.locale, applicationId), review)
108			.then(response => {
109			const newReview = response.data as ApplicationReview;
110			this.updateReviewState(applicationId, newReview);
111			this.handleSavingStatusChange(applicationId, false);
112			})
113			.catch(() => {
114			Swal.fire({
115			icon: "error",
116			title: intl.formatMessage(localizations.oops),
117			text: intl.formatMessage(localizations.somethingWrong),
118			});
119			this.handleSavingStatusChange(applicationId, false);
120			});
121			}
122
123			protected handleStatusChange(
124			applicationId: number,
125			statusId: number \| null,
126			): void {
127			const { applications } = this.state;
128			const application = find(applications, applicationId);
129			if (application === null) {
130			return;
131			}
132			const oldReview = application.application_review
133			? application.application_review
134			: {};
135			const submitReview = Object.assign(oldReview, {
136			review_status_id: statusId,
137			});
138			this.submitReview(applicationId, submitReview);
139			}
140
141			protected handleBulkStatusChange(
142			applicationIds: number[],
143			statusId: number \| null,
144			): void {
145			const { applications } = this.state;
146			const { intl } = this.props;
147			const changedApplications = applications.filter(application =>
148			applicationIds.includes(application.id),
149			);
150			let errorThrown = false;
151			changedApplications.map(application => {
152			const oldReview = application.application_review
153			? application.application_review
154			: {};
155			const submitReview = Object.assign(oldReview, {
156			review_status_id: statusId,
157			});
158			this.handleSavingStatusChange(application.id, true);
159			const request = axios
160			.put(
161			routes.applicationReviewUpdate(intl.locale, application.id),
162			submitReview,
163			)
164			.then(response => {
165			const newReview = response.data as ApplicationReview;
166			this.updateReviewState(application.id, newReview);
167			this.handleSavingStatusChange(application.id, false);
168			})
169			.catch(() => {
170			this.handleSavingStatusChange(application.id, false);
171			// Only show error modal first time a request fails
172			if (!errorThrown) {
173			errorThrown = true;
174			Swal.fire({
175			icon: "error",
176			title: intl.formatMessage(localizations.oops),
177			text: intl.formatMessage(localizations.somethingWrong),
178			});
179			}
180			});
181			return request;
182			});
183			}
184
185			protected handleNotesChange(
186			applicationId: number,
187			notes: string \| null,
188			): void {
189			const { applications } = this.state;
190			const application = find(applications, applicationId);
191			if (application === null) {
192			return;
193			}
194			const oldReview = application.application_review
195			? application.application_review
196			: {};
197			const submitReview = Object.assign(oldReview, {
198			notes,
199			});
200			this.submitReview(applicationId, submitReview);
201			}
202
203			public render(): React.ReactElement {
204			const { applications, savingStatuses } = this.state;
205			const { reviewStatuses, job } = this.props;
206			const { intl } = this.props;
207
208			const reviewStatusOptions = reviewStatuses.map(status => ({
209			value: status.id,
210			label: camelCase(status.name),
211			}));
212
213			return (
214			<ReviewApplications
215			title={job[intl.locale].title}
216			classification={classificationString(job)}
217			closeDateTime={job.close_date_time}
218			applications={applications}
219			reviewStatusOptions={reviewStatusOptions}
220			onStatusChange={this.handleStatusChange}
221			onBulkStatusChange={this.handleBulkStatusChange}
222			onNotesChange={this.handleNotesChange}
223			savingStatuses={savingStatuses}
224			/>
225			);
226			}
227			}
228
229			if (document.getElementById("review-applications-container")) {
230			const container = document.getElementById(
231			"review-applications-container",
232			) as HTMLElement;
233			if (
234			container.hasAttribute("data-job") &&
235			container.hasAttribute("data-applications") &&
236			container.hasAttribute("data-review-statuses") &&
237			container.hasAttribute("data-locale")
238			) {
239			const job = JSON.parse(container.getAttribute("data-job") as string);
240			const applications = JSON.parse(
241			container.getAttribute("data-applications") as string,
242			);
243			const reviewStatuses = JSON.parse(
244			container.getAttribute("data-review-statuses") as string,
245			);
246			const language = container.getAttribute("data-locale") as string;
247			const IntlReviewApplicationsRoot = injectIntl(ReviewApplicationsRoot);
248			ReactDOM.render(
249			<IntlContainer locale={language}>
250			<IntlReviewApplicationsRoot
251			job={job}
252			initApplications={applications}
253			reviewStatuses={reviewStatuses}
254			/>
255			</IntlContainer>,
256			container,
257			);
258			}
259			}
260
261			export default injectIntl(ReviewApplicationsRoot);
262

GCTC-NTGC / TalentCloud

Push — master ( 6ceee8...d4902a )

ReviewApplicationsRoot A

Complexity

Size/Duplication

Importance

7 Functions

Duplication Side-by-Side

Filter issues like